<!doctype html>
<html lang="zh">

<head>
  <title>Bottom App Bar</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
  <link
    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
    rel="stylesheet">
  <link
    href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
    rel="stylesheet">
  <style>
    body {
      font-family: Roboto;
    }
    .container {
      position: relative;
      width: 667px;
      height: 375px;
      overflow: hidden;
      box-shadow: 0 0.85px 3px 0 rgba(0, 0, 0, 19%), 0 0.25px 1px 0 rgba(0, 0, 0, 3.9%);
    }
    @media (min-width: 667px) {
      mdui-bottom-app-bar {
        width: 667px;
      }
    }
    @media (max-width: 666px) {
      .container {
        width: 100%;
      }
    }
  </style>
  <script type="module">
    import '../../packages/mdui/mdui.css';
    import '../../packages/mdui/components/bottom-app-bar.js';
    import '../../packages/mdui/components/button-icon.js';
    import '../../packages/mdui/components/fab.js';
    import '../../packages/mdui/components/button.js';
    import '../../packages/mdui/components/dropdown.js';
    import '../../packages/mdui/components/menu.js';
    import '../../packages/mdui/components/menu-item.js';
    import { $ } from '../../packages/jq/index.js';

    $('.fill-placeholder').append(...Array.from({length: 100}, (_, index) => index + 1).map(item => `<p>${item}</p>`));
  </script>
</head>

<body>
  <main>
    <section>
      <h2>normal</h2>
      <mdui-bottom-app-bar style="position: relative;">
        <mdui-button-icon icon="check_box--outlined"></mdui-button-icon>
        <mdui-button-icon icon="edit--outlined"></mdui-button-icon>
        <mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
        <mdui-button-icon icon="image--outlined"></mdui-button-icon>
        <div style="flex-grow: 1"></div>
        <mdui-fab icon="add"></mdui-fab>
      </mdui-bottom-app-bar>
    </section>

    <section>
      <h2>no fab</h2>
      <mdui-bottom-app-bar style="position: relative;">
        <mdui-button-icon icon="check_box--outlined"></mdui-button-icon>
        <mdui-button-icon icon="edit--outlined"></mdui-button-icon>
        <mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
        <mdui-button-icon icon="image--outlined"></mdui-button-icon>
      </mdui-bottom-app-bar>
    </section>

    <section>
      <h2>custom</h2>
      <mdui-bottom-app-bar style="position: relative;">
        <label>Going?</label>
        <div style="flex-grow: 1"></div>
        <mdui-button>Yes</mdui-button>
        <mdui-button variant="tonal">No</mdui-button>
        <mdui-button variant="tonal">Maybe</mdui-button>
      </mdui-bottom-app-bar>
    </section>

    <section>
      <h2>with overflow menu</h2>
      <mdui-bottom-app-bar style="position: relative;">
        <mdui-dropdown>
          <mdui-button-icon icon="menu" slot="trigger"></mdui-button-icon>
          <mdui-menu>
            <mdui-menu-item>Settings</mdui-menu-item>
            <mdui-menu-item>Send Feedback</mdui-menu-item>
            <mdui-menu-item>Help</mdui-menu-item>
          </mdui-menu>
        </mdui-dropdown>
        <mdui-button-icon icon="edit--outlined"></mdui-button-icon>
        <mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
        <mdui-button-icon icon="image--outlined"></mdui-button-icon>
        <div style="flex-grow: 1"></div>
        <mdui-fab icon="add"></mdui-fab>
      </mdui-bottom-app-bar>
    </section>

    <section>
      <h2>scroll-behavior="hide" & default position:fixed</h2>
      <mdui-bottom-app-bar scroll-behavior="hide" fab-detach>
        <mdui-button-icon icon="check_box--outlined"></mdui-button-icon>
        <mdui-button-icon icon="edit--outlined"></mdui-button-icon>
        <mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
        <mdui-button-icon icon="image--outlined"></mdui-button-icon>
        <div style="flex-grow: 1"></div>
        <mdui-fab icon="add"></mdui-fab>
      </mdui-bottom-app-bar>
    </section>

    <section>
      <h2>scroll-target="#in-container" scroll-behavior="hide"</h2>
      <div class="container">
        <mdui-bottom-app-bar scroll-target="#in-container" scroll-behavior="hide">
          <mdui-button-icon icon="check_box--outlined"></mdui-button-icon>
          <mdui-button-icon icon="edit--outlined"></mdui-button-icon>
          <mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
          <mdui-button-icon icon="image--outlined"></mdui-button-icon>
          <div style="flex-grow: 1"></div>
          <mdui-fab icon="add"></mdui-fab>
        </mdui-bottom-app-bar>
        <div style="max-height: 100%; overflow: auto; box-sizing: border-box" id="in-container">
          <div class="fill-placeholder"></div>
        </div>
      </div>
    </section>

    <section>
      <h2>scroll-behavior="hide" & fab-detach</h2>
      <div class="container">
        <mdui-bottom-app-bar fab-detach scroll-target="#hide-fab-detach" scroll-behavior="hide">
          <mdui-button-icon icon="check_box--outlined"></mdui-button-icon>
          <mdui-button-icon icon="edit--outlined"></mdui-button-icon>
          <mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
          <mdui-button-icon icon="image--outlined"></mdui-button-icon>
          <div style="flex-grow: 1"></div>
          <mdui-fab icon="add"></mdui-fab>
        </mdui-bottom-app-bar>
        <div style="max-height: 100%; overflow: auto; box-sizing: border-box" id="hide-fab-detach">
          <div class="fill-placeholder"></div>
        </div>
      </div>
    </section>

    <section>
      <h2>scroll-threshold</h2>
      <div class="container">
        <mdui-bottom-app-bar fab-detach scroll-target="#scroll-threshold" scroll-behavior="hide" scroll-threshold="80">
          <mdui-button-icon icon="check_box--outlined"></mdui-button-icon>
          <mdui-button-icon icon="edit--outlined"></mdui-button-icon>
          <mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
          <mdui-button-icon icon="image--outlined"></mdui-button-icon>
          <div style="flex-grow: 1"></div>
          <mdui-fab icon="add"></mdui-fab>
        </mdui-bottom-app-bar>
        <div style="max-height: 100%; overflow: auto; box-sizing: border-box" id="scroll-threshold">
          <div class="fill-placeholder"></div>
        </div>
      </div>
    </section>

    <div class="fill-placeholder"></div>

  </main>
</body>

</html>
